﻿@page "/components/badge"
@page "/components/MudBadge"

<DocsPage>
    <DocsPageHeader Title="Badge">
                    <Description>A badge is a useful way to wrap or overlay an action button or icon with a simple notification, making it easy to emphasize things like the number of notifications received.</Description>
    </DocsPageHeader>
            
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" ShowCode="false" Code="@nameof(BadgeBasicExample)">
                <BadgeBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Playground">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" ShowCode="false" Code="@nameof(BadgeInteractiveExample)">
                <BadgeInteractiveExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
